<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!-- 表单 1. form 代表整个表单 action 属性表示收集好数据后，提交的地址，#占位符表示提交到当前页面  -->
    <form action="#">
        <!--2. 表单里可以写各种表单的控件，如 文本框，密码框，复选框，单选框，下拉框，文本域等
        type属性表示控件的类型:
        text表示文本  password表示密码框
        radio表示单选框  checkbox表示复选框

        submit表示提交按钮 reset重置按钮 button普通按钮
        date表示日期控件 color表示颜色控件 range表示进度条控件 file表示文件控件
        -->
        姓名:<input type="text" name="uname" placeholder="请输入姓名"><br>
        <!--value  value属性本身就存在，用于保存控件的值，也可以通过修改输入框的值来修改默认值 进行提交-->
        昵称:<input type="text" name="nickname1" value="rose"><br>
        <!--readonly 只读 只能看 不能修改 可以提交数据-->
        昵称:<input type="text" name="nickname2" value="rose" readonly><br>
        <!--disabled 禁用 不能看 不能修改 不能提交数据-->
        昵称:<input type="text" name="nicknam3" value="rose" disabled><br>
        密码:<input type="password" name="pwd" maxlength="6" value="123456"><br>
        <!--单/多选框必须设置相同的name属性分到同一组，
        且需要每一个都设置value属性，否则无法提交
        checked 设置默认选中项-->
        性别:
        <input type="radio" name="gender" value="1" checked>男
        <input type="radio" name="gender" value="0">女 <br>
        爱好:
        <input type="checkbox" name="hobby" value="shopping">购物
        <input type="checkbox" name="hobby" value="swimming">游泳
        <input type="checkbox" name="hobby" value="reading" checked>读书
        <br>
        生日:<input type="date" name="birthday">
        <br>
        幸运色:<input type="color" name="lColor">
        <br>
        缩放:<input type="range" name="scale">
        <br>
        文件:<input type="file" name="file">
        <br>


        <!-- select 多选框 -->
        喜欢的城市
        <select name="city">
            <option value="beijing" selected>北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br>
        <!-- 关联 for属性关联id-->
        <input type="checkbox" id="ok">
        <label for="ok">我已阅读并同意</label>
        <br>
        <!--让输入框获取焦点 关联输入框-->
        <label for="uu">关联文字</label>
        <input type="text" id="uu">



        <hr>
        <input type="submit">
        <input type="reset" value="点我重置">
        <input type="button" value="普通按钮">
        <button >普通按钮</button>
    </form>
</body>
</html>